<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>

  <style>
    .box-1
    {
      width:100px;
      height:100px;
        background-color: red;
      animation:change_width 5s;
    }

    .box-2
    {
        width:100px;
        height:100px;
        background-color: red;
        animation:change_color 5s;
    }




    @keyframes change_color
    {
        from {background:red;}
        to {background:yellow;}
    }

    @keyframes change_width
    {
        from {width:100px;}
        to {width:200px;}
    }

  </style>
</head>
<body>


  <div class="box-1">
  </div>

 <div class="box-2">

 </div>
</body>
</html>